<template>
  <div style="display: flex;  margin-top: 20px;">
    <el-card style="width:70%" class="applyCard">
      <h2>申请离职</h2>
      <div class="myapply">
        <span>
          <img src="@/assets/common/img.jpeg" class="img">
        </span>
        <span style="padding-top: 10px;">
          <strong>{{ list.username }}</strong>
          <p>部门:  {{ list.departmentName }}</p>
          <p>入职时间:  {{ list.timeOfEntry|formatDate }}</p>
        </span>
      </div>
      <hr>
      <div class="bottom">
        <p>
          申请类型:
          <span>|</span>
          <span class="span">{{ list.data.processName }}</span>
        </p>
        <p>
          期望离职时间:
          <span>|</span>
          <span class="span">{{ list.data.end_time }}</span>
        </p>
        <p>
          离职原因:
          <span>|</span>
          <span class="span">{{ list.data.reason }}</span>

        </p>
      </div>
    </el-card>
    <!-- 右边结构 -->
    <div class="rigth_bian">
      <el-card>
        <p>审批记录</p>
        <hr>
        <div class="Imte">
          <li v-for="(item,index) in getlist" :key="item.taskId">
            <div class="name">
              <span :style="index===getlist.length-1 ? 'border-right:none':''">{{ item.handleTime |formatDate }}</span>
            </div>
            <div class="act">
              <div>
                <strong>{{ item.handleUserName }}</strong>
                <span v-if="index==0">发起申请</span>
                <span v-else-if="item.handleType == '3'">审批驳回</span>
                <span v-else-if="item.handleType == '4'">已撤销</span>
                <span v-else-if="item.handleType == '1'">未开始</span>
                <span v-else-if="item.handleType == '2'">审批通过</span>
                <span v-else>审批中</span>
              </div>

            </div>

          </li>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getApprovalsTaskDetail, getApprovalsDetail } from '@/api/user'
export default {
  data() {
    return {
      // 渲染左边结构的数据
      list: {

        data: {
        }
      },
      // 渲染右边结构的数据
      getlist: []
    }
  },
  mounted() {
    this.getApprovals()
    this.getDetail()
  },
  methods: {
    async getApprovals() {
      console.log(this.$route.params.id)
      this.getlist = await getApprovalsTaskDetail(this.$route.params.id)
      console.log(this.getlist)
    },
    async getDetail() {
      const data = await getApprovalsDetail(this.$route.params.id)
      this.list = data
      // console.log(this.list)
      this.list.data = JSON.parse(data.procData)
      console.log(this.list.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.applyCard{
  width: 70%;
  margin-left: 10px;
  .myapply{
    display: flex;
    .img{
      width: 100px;
      // height: 80px;
    }
  }
  .bottom{
    margin-top: 40px;
    p{
      color: #ccc;
      margin-left: 170px;
    }
    :nth-child(2){
      margin-left: 138px;
    }
    .span{
      color: #000;
      margin-left: 20px;

    }
  }
}
.rigth_bian{
  margin-left: 20px;
    .Imte{
        height: 606px;
        margin-top: 30px;
    }
    li{
        list-style: none;
        display: flex;
        justify-content: space-evenly;

       .name{
            ::after{
                content: " ";
                border-radius: 50%;
                position: absolute;
                width: 10px;
                height: 10px;
                border: 2px solid #44b549;
                right: -5px;
                top: 0;
                background: #fff;
              }
           span{
               display: block;
               width: 120px;
               height: 80px;
               border-right: 1px solid #ccc;
               position: relative;

           }
       }
       .act{
           div{
                width: 130px;
                height: 80px;
                margin-left: 15px;
               strong{
                   display: inline-block;
                   margin-right: 8px;
               }
           }
       }
    }
}
</style>
